<template>
  <div class="wrapper" ref="slide">
    <div class="content" ref="group" v-dom="init">
      <slot></slot>
    </div>
    <div class="dots" v-if="dots">
      <span class="dot"
            :class="{'current':currentIndex == i}"
            v-for="(dot,i) in num"
            :key="dot"></span>
    </div>
    <div class="arrow" v-if="arrow">
      <i class="icon-back left" @click="prev"></i>
      <i class="icon-back right" @click="next"></i>
    </div>
  </div>
</template>

<script>
  import BScroll from '@better-scroll/core'
  import Slide from '@better-scroll/slide'
  BScroll.use(Slide)

    export default {
        name: "Slide",
        props: {
            loop: {
                type: Boolean,
                default: true
            },
            autoplay: {
                type: Boolean,
                default: false
            },
            interval: {
                type: Number,
                default: 4000
            },
            click: {
                type: Boolean,
                default: true
            },
            dots: {
                type: Boolean,
                default: true
            },
            arrow: {
                type: Boolean,
                default: false
            }
        },
        data(){
            return {
                timer: null,
                currentIndex: 0,
                num: 0
            }
        },
        methods: {
            init(){
                if(!this.$refs.slide)
                    return
                this.format()
                this.slide = new BScroll(this.$refs.slide,{
                    scrollX: true,
                    scrollY: false,
                    slide: {
                        loop: this.loop,
                        threshold: 0.5
                    },
                    momentum: false,
                    bounce: false,
                    useTransition: true,
                    click: this.click,
                    tap: true
                })

                if(this.autoplay){
                    this.slide.on('beforeScrollStart',this.clear)
                    this.slide.on('scrollEnd',this.autoPlay)
                    setTimeout(()=>{
                        this.next()
                    },this.interval)
                }
                this.slide.on('slideWillChange',(pos) => {
                   this.currentIndex = pos.pageX
                   this.$emit('pagechange',pos.pageX)
                })
            },
            refresh(){
                this.slide && this.slide.refresh()
            },
            format(){
              let children = this.$refs.group.children
              this.num = children.length
              for(let i = 0; i < children.length; i++){
                  let item = children[i]
                  item.classList.add('item')
              }
            },
            next(){
                this.slide.next()
            },
            prev(){
              this.slide.prev()
            },
            autoPlay(){
                this.timer = setTimeout(()=>{
                    this.next()
                },this.interval)
            },
            clear(){
                clearTimeout(this.timer)
            }
        }
    }
</script>

<style scoped lang="stylus">
  @import "~common/stylus/variable"

  .wrapper
    position relative
    width 100%
    .content
      height 100%
      display flex
      flex-wrap nowrap
      .item
       flex 0 0 100vw
    .dots
      position absolute
      width 100%
      bottom 7px
      display flex
      justify-content center
      align-items center
      .dot
        width 12px
        height 12px
        border-radius 50%
        margin 0 3px
        background $color-text-ll
        &.current
          width 24px
          height 6px
          border-radius 10px
          background $color-text



    .arrow
      position absolute
      top 50%
      transform translateY(-50%)
      left 0
      right 0
      .icon-back
        font-size 44px
        color $color-text
        &.left
          float left
        &.right
          float right
          transform rotateZ(180deg)
</style>
